<template>
  <div class="Icons">
    <swiper ref="mySwiper">
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="Icon" v-for="item of page" :key="item.id">
          <img class="Icon-img" :src="item.imgUrl">
          <div class="Icon-font">旅游</div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  // data () {
  //   return {
  //     iconList: [{
  //       id: '00001',
  //       imgurl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=613471681,2332854647&fm=26&gp=0.jpg'
  //     }, {
  //       id: '00002',
  //       imgurl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=613471681,2332854647&fm=26&gp=0.jpg'
  //     }, {
  //       id: '00003',
  //       imgurl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=613471681,2332854647&fm=26&gp=0.jpg'
  //     }, {
  //       id: '00004',
  //       imgurl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=613471681,2332854647&fm=26&gp=0.jpg'
  //     }, {
  //       id: '00005',
  //       imgurl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=613471681,2332854647&fm=26&gp=0.jpg'
  //     }, {
  //       id: '00006',
  //       imgurl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=613471681,2332854647&fm=26&gp=0.jpg'
  //     }, {
  //       id: '00007',
  //       imgurl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=613471681,2332854647&fm=26&gp=0.jpg'
  //     }, {
  //       id: '00008',
  //       imgurl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=613471681,2332854647&fm=26&gp=0.jpg'
  //     }, {
  //       id: '00009',
  //       imgurl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=613471681,2332854647&fm=26&gp=0.jpg'
  //     }]
  //   }
  // },
  props: {
    iconList: Array
  },
  computed: {
    pages () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
//  让轮播图可滑动区域和Icons一样，由于.swiper-container自带overflow：hidden 所以不写
//  height: 0 padding-bottom: 50% 是无可占领一个区域
</script>

<style lang="stylus" scoped>
.Icons >>> .swiper-container
  height: 0
  padding-bottom: 50%
.Icon
  position: relative;
  width: 25%
  height: 0
  padding-bottom: 25%
  float:left
  overflow: hidden
  .Icon-img
    height: 1.3rem
    position: absolute
    left: 0.35rem
    right: 0
    top: .2rem
  .Icon-font
    position: absolute
    display: block
    font-size: 0.25rem
    bottom: 0.1rem
    left: 40%
</style>
